<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SVG实现背景透明JPG图片</title>
    <style>
        svg {
            width: 100%;
            height: 100%;
            background-color: #fff;
        }

        .path {
            fill: none;
            stroke-width: 3px;
        }
        #path1 {
            stroke-dashoffset: 7% 7%;
            stroke-dasharray: 0 35%;
            animation: animation 3s linear forwards;
        }

        @keyframes animation {
            100% {
                stroke-dasharray: 7% 7%;
                stroke-dashoffset: 7%;
            }
        }

    </style>
</head>
<body>
<!--http://www.zhangxinxu.com/wordpress/2017/03/transparent-jpg-svg/-->
<svg   viewBox="0 0 921.17 1409.71" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <clipPath id="chris-clip">
            <path  stroke="#00adef" class="path" d="M281.221,261.806c0,2.756-2.166,4.922-4.922,4.922l0,0h-33.964c-11.715-24.119-31.503-59.855-47.156-68.026
  c-15.751,7.974-35.637,43.907-47.451,68.026h-33.865l0,0c-2.756,0-4.922-2.166-4.922-4.922l0,0l0,0c0-0.295,0-0.689,0.098-0.984
  c0,0,14.078-69.109,79.15-129.161c-2.953-2.56-5.907-5.119-8.959-7.58c-1.87-1.575-2.166-4.233-0.591-6.104
  c1.575-1.772,4.43-2.166,6.497-0.689c3.347,2.461,6.694,5.218,9.746,8.073c3.15-2.953,6.497-5.71,10.041-8.368
  c2.067-1.378,4.922-1.083,6.497,0.689c1.575,1.87,1.28,4.529-0.591,6.104c-3.052,2.56-6.104,5.218-9.155,7.876
  c65.27,59.953,79.446,129.161,79.446,129.161C281.221,261.117,281.221,261.412,281.221,261.806L281.221,261.806L281.221,261.806z"></path>
        </clipPath>
    </defs>
    <image  xlink:href="../static/images/1.jpg" clip-path="url(#chris-clip)" x="0" y="0" width="450" height="582" id="path1" />
</svg>
</body>
</html>